<template>
  <view class="template-paymentorder tn-safe-area-inset-bottom">
    <view :style="{ height: vuex_custom_bar_height + 'px' }" class="tn-navbg">
      <!-- 顶部自定义导航 -->
      <tn-nav-bar alpha customBack fixed>
        <view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
          <text class='icon tn-icon-left'></text>
          <text class='icon tn-icon-home-capsule-fill'></text>
        </view>
        <view class="tn-flex tn-flex-col-center tn-flex-row-center ">
          <text class="tn-text-bold tn-text-xl tn-color-black">订单支付</text>
        </view>
      </tn-nav-bar>
    </view>
    
    <!-- 内容 -->
    <view class="tn-flex tn-flex-direction-column tn-margin-top-sm tn-margin-bottom content-container">
      <!-- 加载状态 -->
      <view v-if="loading" class="loading-container">
        <text>正在加载订单信息...</text>
      </view>
      
      <!-- 订单信息卡片 -->
      <view class="order-card">
        <!-- 订单类型及描述 -->
                  <view class="order-title">
            <text class="title-main">{{orderInfo.title || '订单详情'}}</text>
            <text v-if="orderInfo.projectTitle" class="title-separator"> — </text>
            <text v-if="orderInfo.projectTitle" class="title-sub">{{orderInfo.projectTitle}}</text>
          </view>
        
                  <!-- 待付款金额 -->
          <view class="payment-amount" >
            <view class="payment-label">待付款：</view>
            <view class="amount-value">¥{{orderInfo.totalPrice}}</view>
          </view>
        
                  <!-- 创建时间 -->
          <view class="payment-period" >
            <text>创建时间：{{formatTime(orderInfo.createTime)}}</text>
          </view>
      </view>
      
              <!-- 需求内容部分 -->
        <view class="requirements-section" >
          <view class="section-title">需求内容</view>
          <view class="requirements-content">
            <text>{{orderInfo.requirementDescription || '暂无需求描述'}}</text>
          </view>
        </view>
      
      <!-- 底部按钮区域 -->
      <view class="bottom-actions">
        <!-- 在线客服 -->
        <view class="customer-service" @click="contactCustomerService">
          <text class="icon tn-icon-service-fill"></text>
          <text>在线客服</text>
        </view>
        
        <!-- 立即付款按钮 -->
        <view class="pay-button" @click="handlePayment">
          立即付款
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import { getSubOrderDetail } from '@/api/project'
import { getPayURL } from '@/api/pay'

export default {
  name: 'PaymentOrder',
  mixins: [template_page_mixin],
  data() {
    return {
      orderId: '', // 订单ID
      loading: false, // 加载状态
      // 订单信息
      orderInfo: {
    
      }
    }
  },
  onLoad(options) {
    // 接收传递过来的订单ID
    if (options.id) {
      this.orderId = options.id
      this.getOrderDetail()
    }
  },
  methods: {
    // 获取订单详情
    async getOrderDetail() {
      if (!this.orderId) {
        uni.showToast({
          title: '订单ID不能为空',
          icon: 'error'
        })
        return
      }
      
      this.loading = true
      try {
        const res = await getSubOrderDetail(this.orderId)
        if (res.code === 200 && res.data) {
          // 更新订单信息
          this.orderInfo = res.data
        } else {
          uni.showToast({
            title: res.msg || '获取订单详情失败',
            icon: 'error'
          })
        }
      } catch (error) {
        console.error('获取订单详情失败:', error)
        uni.showToast({
          title: '获取订单详情失败',
          icon: 'error'
        })
      } finally {
        this.loading = false
      }
    },
    goBack(){
      uni.navigateBack()
    },
    
    // 处理支付
    async handlePayment() {
      if (!this.orderInfo.id) {
        uni.showToast({
          title: '订单信息不完整',
          icon: 'error'
        })
        return
      }
      
      try {
        let that = this;
        const res = await getPayURL(this.orderInfo.id, 'LM_SUB')
        if (res.code === 200) {
          let sign = JSON.parse(res.msg);
          uni.requestPayment({
            provider: 'wxpay',
            timeStamp: sign.timeStamp,
            nonceStr: sign.nonceStr,
            package: sign.package,
            signType: sign.signType,
            paySign: sign.paySign,
            success: async function(res) {
              uni.showToast({
                title: '支付成功',
                icon: 'success'
              })
              // 支付成功后返回上一页
              setTimeout(() => {
                uni.navigateBack()
              }, 1500)
            },
            fail: function(err) {
              uni.showToast({
                title: '支付失败',
                icon: 'error'
              })
            }
          })
        } else {
          uni.showToast({
            title: res.msg || '获取支付信息失败',
            icon: 'error'
          })
        }
      } catch (error) {
        console.error('支付失败:', error)
        uni.showToast({
          title: '支付失败',
          icon: 'error'
        })
      }
    },
    
    // 联系客服
    contactCustomerService() {
      uni.showToast({
        title: '正在连接客服...',
        icon: 'none'
      })
      // 这里添加实际的客服联系逻辑
    },
    
    // 格式化时间
    formatTime(timeString) {
      if (!timeString) return '';
      try {
        // 将 "2025-07-27 14:22:13" 转换为 "2025年07月27日 14:22:13"
        const parts = timeString.split(' ');
        if (parts.length >= 1) {
          const datePart = parts[0]; // "2025-07-27"
          const timePart = parts[1] || ''; // "14:22:13"

          const dateArray = datePart.split('-');
          if (dateArray.length === 3) {
            const year = dateArray[0];
            const month = dateArray[1];
            const day = dateArray[2];

            const formattedDate = `${year}年${month}月${day}日`;
            return timePart ? `${formattedDate} ${timePart}` : formattedDate;
          }
        }
        return timeString; // 如果格式不对，返回原字符串
      } catch (e) {
        return timeString;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tn-custom-nav-bar__back {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }

  &:before {
    content: " ";
    width: 1rpx;
    height: 110%;
    position: absolute;
    top: 22.5%;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    opacity: 0.7;
    background-color: #FFFFFF;
  }
}

/* 页面容器样式 */
.template-paymentorder {
  min-height: 100vh;
  background-color: #F8F8F8;
  position: relative;
  z-index: 0;
}

/* 内容区域 */
.content-container {
  padding-bottom: 120rpx;
}

/* 订单信息卡片样式 */
.order-card {
  margin: 10rpx 30rpx;
  background-color: #FFFFFF;
  border-radius: 10rpx;
  padding: 20rpx 24rpx;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.03);
}

/* 订单标题样式 */
.order-title {
  font-size: 30rpx;
  color: #333333;
  margin-bottom: 24rpx;
  display: flex;
  align-items: center;
}

.title-main {
  font-weight: bold;
}

.title-separator {
  font-weight: normal;
  margin: 0 10rpx;
}

.title-sub {
  font-weight: normal;
}

/* 支付金额样式 */
.payment-amount {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.payment-label {
  font-size: 28rpx;
  color: #FF3B30;
}

.amount-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #FF3B30;
  margin-left: 2rpx;
}

/* 支付期限样式 */
.payment-period {
  font-size: 24rpx;
  color: #999999;
  margin-bottom: 6rpx;
}

/* 需求内容部分 */
.requirements-section {
  margin: 20rpx 30rpx;
  background-color: #FFFFFF;
  border-radius: 10rpx;
  padding: 20rpx 24rpx;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.03);
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 16rpx;
}

.requirements-content {
  font-size: 26rpx;
  color: #666666;
  line-height: 1.5;
}

/* 底部按钮区域 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  background-color: #FFFFFF;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 99;
}

/* 客服按钮 */
.customer-service {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #666666;
  font-size: 28rpx;
  padding: 0 10rpx;
}

.customer-service .icon {
  margin-right: 0;
  margin-bottom: 6rpx;
  font-size: 40rpx;
  color: #999;
}

/* 支付按钮 */
.pay-button {
  background: linear-gradient(to right, #FF6B6B, #FF4F4F);
  color: #FFFFFF;
  font-size: 32rpx;
  padding: 16rpx 100rpx;
  border-radius: 100rpx;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 4rpx 8rpx rgba(255, 79, 79, 0.3);
}

/* 加载状态 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
  color: #666666;
  font-size: 28rpx;
}
</style>
